<% if mobile? %>
    <div class="yuyue">
        <home-reserve></home-reserve>
    </div>
<% else %>
    <div class="container-fluid reserves-fluid">
        <div class="reserves-new container">
            <div class="row margin-reset top-row">
                <div class="pull-right">
                    <a href="/products">
                        <i class="fa fa-angle-left"></i>
                        返回购物
                    </a>
                </div>
                <h4>一键预约</h4>
            </div>

            <div class="row reserve-row">
                <div class="col-sm-4 img-col">
                    <img src="<%= image_path('pic.png') %>" alt="门窗预约测量">
                </div>

                <div class="col-sm-8 content-col">
                    <%= flash[:error] %>
                    <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit" action="/reserves" method="POST">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="">测量类型</label>
                                <div class="form-group">
                                    <% @survey_fees.each_with_index do |fee, index| %>
                                    <label class="radio-inline">
                                        <input value="<%= fee.id %>" type="radio" <%= 'checked' if index == 0 %> name="reserve[survey_fee_id]" id="fee-type-<%= index %>"/>
                                        <!-- <label for="fee-type-<%= index %>"> -->
                                        <%= fee.name %>:
                                        <%= fee.amount %>元
                                    </label>
                                    <% end %>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                              <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                                <label for="name">姓名</label>
                                <input type="text" name="reserve[contact_name]" class="form-control private-input" required v-model.lazy="contactName" placeholder="您的姓名">
                                <field-messages auto-label name="reserve[contact_name]" show="$touched || $submitted" class="error">
                                  <div slot="required">请输入您的姓名</div>
                                </field-messages>
                              </validate>
                            </div>
                        </div>

                    </div>
                    <% if current_user %>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                              <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                                <label for="">手机号</label>
                                <input value="<%= current_user.mobile %>" label="false" class="form-control" placeholder="您的手机号" type="tel" name="user[mobile]" required v-model.lazy="cellphone" cellphone-validator>
                                <field-messages auto-label name="user[mobile]" show="$touched || $submitted" class="error">
                                  <div slot="required">请输入您的手机号</div>
                                  <div slot="cellphone-validator">请输入正确的手机号</div>
                                </field-messages>
                              </validate>
                            </div>
                        </div>

                        <div id="app">
                            <div class="col-sm-12">
                                <cascaded-selector :callback="formCallback" inline-template>
                                    <div class="row city-group">
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <select id="" class="city-select form-control" name="province">
                                                    <option>--省份--</option>
                                                    <%= options_for_select(ChinaCity.list) %>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <select id="" class="city-select form-control" name="city">
                                                    <option>--城市--</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <select id="" class="city-select form-control" name="region">
                                                    <option>--区--</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <select :id="lastSelector" class="city-select form-control" name="address[street_id]">
                                                    <option value="">--街道--</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </cascaded-selector>
                                <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                                  <input type="hidden" name="street" required v-model.lazy="street" />
                                  <field-messages auto-label name="street" show="$touched || $submitted" class="error">
                                    <div slot="required">请选择街道</div>
                                  </field-messages>
                                </validate>
                            </div>

                        </div>
                    </div>
                <% else %>

                    <div id="app">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                  <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                                    <label for="phone">手机号</label>
                                    <div class="row">
                                      <div class="col-xs-8">
                                        <input label="false" class="form-control" placeholder="您的手机号" type="tel" name="user[mobile]" required v-model.lazy="cellphone" cellphone-validator>
                                      </div>
                                      <div class="col-xs-4">
                                        <cellphone-code></cellphone-code>
                                      </div>
                                    </div>
                                    <field-messages auto-label name="user[mobile]" show="$touched || $submitted" class="error">
                                      <div slot="required">请输入手机号</div>
                                      <div slot="cellphone-validator">请输入正确的手机号</div>
                                    </field-messages>
                                  </validate>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                  <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                                    <label for="code">验证码</label>
                                    <input type="number" class="form-control" id="code" name="user[sms_code]" placeholder="您手机收到的验证码" required v-model.lazy="smsCode">
                                    <field-messages auto-label name="user[sms_code]" show="$touched || $submitted" class="error">
                                      <div slot="required">请输入验证码</div>
                                    </field-messages>
                                  </validate>
                                </div>
                            </div>
                        </div>

                        <cascaded-selector :callback="formCallback" inline-template>
                            <div class="row city-group">
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <select id="province" class="city-select form-control" name="province">
                                            <option>--省份--</option>
                                            <%= options_for_select(ChinaCity.list) %>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <select id="" class="city-select form-control" name="city">
                                            <option>--城市--</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <select id="" class="city-select form-control" name="region">
                                            <option>--区--</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                  <div class="form-group">
                                    <select :id="lastSelector" class="city-select form-control" name="address[street_id]">
                                      <option value="">--街道--</option>
                                    </select>
                                  </div>
                                </div>
                            </div>
                        </cascaded-selector>

                        <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                          <input type="hidden" name="street" required v-model.lazy="street" />
                          <field-messages auto-label name="street" show="$touched || $submitted" class="error">
                            <div slot="required">请选择街道</div>
                          </field-messages>
                        </validate>
                    </div>
                    <% end %>

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                              <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                                <label for="address_desc">详细地址</label>
                                <textarea id="address_desc" type="text" name="reserve[address_desc]" class="form-control private-input" required v-model.lazy="address" placeholder="您待测量的详细地址"></textarea>
                                <field-messages auto-label name="reserve[address_desc]" show="$touched || $submitted" class="error">
                                  <div slot="required">请输入详细地址</div>
                                </field-messages>
                              </validate>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                              <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                                <label for="desc">测量详情</label>
                                <textarea id="desc" type="text" name="reserve[desc]" class="form-control private-input" required v-model.lazy="desc" placeholder="您待测量的详情"></textarea>
                                <field-messages auto-label name="reserve[desc]" show="$touched || $submitted" class="error">
                                  <div slot="required">请输入测量详情</div>
                                </field-messages>
                              </validate>
                            </div>
                        </div>
                    </div>
                    <% if current_user %>
                      <input type="hidden" name="reserve[user_id]" value="<%= current_user.id %>">
                    <% end %>
                    <%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
                    <button type="submit" class="btn btn-primary">一键预约测量</button>
                    </vue-form>
                </div>
            </div>
        </div>
    </div>
<% end %>
